<template>
    <view>
        <Header returnIcon="white" :background="background" :title="title" />
        <CheckTitle :titleList="titleList" :checkIndex="checkIndex" @checkChange="checkChange"/>
        <view class="content" :style="{'height': `${noBarHeight - 52 }px; !important`}">
            <view class="block" id="brief">
                <view class="block_title fcb mb20">
                    <view class="title_text">
                        项目简介
                    </view>
                    <img @click="onStar" class="zxyz_icon" :src="`https://xunlantech.oss-cn-hangzhou.aliyuncs.com/source/static/image/${detail.iscollect == 1 ? 'instar' : 'star'}_icon.png`" />
                </view>
                <view class="block_content">
                    {{ detail.jo_content || ''}}
                </view>
                <view class="tips_block">
                    <view class="tips" v-for="(item, index) in 5" :key="index">产业类型{{item}}</view>
                </view>
            </view>
            <view class="block">
                <view class="block_title fcb mb20">
                    <view class="title_text">
                        意向区域
                    </view>
                    <view class="title_text">
                        投资匹配度
                        <img class="zxyz_min_icon" src="https://xunlantech.oss-cn-hangzhou.aliyuncs.com/source/static/image/doubt_icon.png"/>
                    </view>
                </view>
                <view class="block_main">
                    <view class="block_left">
                        <view class="left_text">
                            {{ detail.area || ''}}
                        </view>
                        <view class="title_text">
                            项目阶段
                            <span v-if="detail.update_time" class="title_text_time">更新时间： {{detail.update_time || ''}}</span>
                        </view>
                        <view class="stage_block">
                            <view :class="item.state ?'inStage' : 'stage'"  :style="{'z-index': (stageData.length - index), left: `${index * -10}rpx`}" v-for="(item, index) in stageData" :key="index">{{item.label}}</view>
                        </view>
                    </view>
                    <view class="block_view">

                    </view>
                </view>
            </view>
            <view class="block" id="estimate">
                <view class="block_title fcb mb20">
                    <view class="title_text">
                        投资预算
                    </view>
                </view>
                <view class="budget">
                    <view class="budget_block">
                        <view class="budget_title">投资总额</view>
                        <view class="budget_text">{{ detail.jo_investment || '' }}</view>
                        <view class="budget_unit">亿元</view>
                    </view>
                    <view class="budget_block">
                        <view class="budget_title">产量预估</view>
                        <view class="budget_text">{{ detail.jo_output || '' }}</view>
                        <view class="budget_unit">亿元</view>
                    </view>
                    <view class="budget_block">
                        <view class="budget_title">税收预估</view>
                        <view class="budget_text">{{ detail.jo_taxation || '' }}</view>
                        <view class="budget_unit">亿元</view>
                    </view>
                    <view class="budget_block">
                        <view class="budget_title">带动就业</view>
                        <view class="budget_text">{{ detail.jo_employment || ''}}</view>
                        <view class="budget_unit">人</view>
                    </view>
                </view>
            </view>
            <view class="block">
                <view class="block_title fcb mb20">
                    <view class="title_text">
                        投资需求
                    </view>
                </view>
                <view class="block_content">
                    {{ detail.jo_point || '' }}
                </view>
            </view>
            <view class="block">
                <view class="block_title fcb mb20">
                    <view class="title_text">
                        载体要求
                    </view>
                </view>
                <view class="block_content">
                    {{ detail.carrier || '' }}
                </view>
            </view>
            <view class="block" id="main" @click.stop="navCompany">
                <view class="block_title fcb mb20">
                    <view class="title_text">
                        投资主体
                    </view>
                </view>
                <view class="company_head">
                    <img v-if="detail.firm_id" class="head_img_yes" :onerror="formData.basic.logo" :src="`https://t.zhaoxuanyun.com/data/upload/firm/logo/${detail.firm_id}.jpg`" />
                    <view v-else class="head_img">{{ dateil.abbreviation }}</view>
                    <view class="head_name">
<!--                        <span v-if="detail.abbreviation">[{{ detail.abbreviation }}]</span>-->
                        {{ detail.fullname || '' }}
                        <view class="tips_block_com">
                            <view class="tips" v-for="(item, index) in 3" :key="index">企业tips{{item}}</view>
                        </view>
                    </view>
                </view>
                <view class="block_content">
                    {{ detail.jo_content || '' }}
                </view>
                <view class="tips_block">
                    <view class="tips" v-for="(item, index) in detail.tally" :key="index">{{ item.name }}</view>
                </view>
            </view>
            <view v-if="detail.jo_contacts && 4" class="block" id="phone">
                <view class="block_title fcb mb20">
                    <view class="title_text">
                        联系方式
                    </view>
                </view>
                <view class="contacts" v-for="(item, index) in 4" :key="index">
                    <img class="head" src="https://xunlantech.oss-cn-hangzhou.aliyuncs.com/source/static/image/im-blue_icon.png" />
                    <view class="contacts_main">
                        <view class="name">张三</view>
                        <view class="unit">某某员工</view>
                    </view>
                    <view class="img_black">
                        <img class="im_icon" src="https://xunlantech.oss-cn-hangzhou.aliyuncs.com/source/static/image/im-blue_icon.png" />
                    </view>
                </view>
                <view v-if="detail.jo_contacts" class="contacts_block" v-html="detail.jo_contacts"></view>
            </view>
        </view>
    </view>
</template>
<script>
import CheckTitle from "@/components/CheckTitle.vue";
import Header from "@/components/Header.vue";
import {mobilfajuefind} from "@/utils/api/project";
import {itemColAdd, itemDel} from "../../../utils/api/project";
var app = getApp()
export default ({
    name: "projectDetail",
    data() {
        return {
            background: 'linear-gradient(0, #5162FD, #8E4EF7)',
            title: '项目详情',
            noBarHeight: app.globalData.noBarHeight,
            checkIndex: 1,
            titleList: [
                {
                    id: 1,
                    title: '项目简介',
                    key: 'brief'
                },
                {
                    id: 2,
                    title: '投资估算',
                    key: 'estimate'
                },
                {
                    id: 3,
                    title: '投资主体',
                    key: 'main'
                },
                {
                    id: 4,
                    title: '联系方式',
                    key: 'phone'
                }
            ],
            detail: {},
            id: '',
            stageData: [
                {
                    id: 1,
                    label: '立项',
                    state: false
                },
                {
                    id: 2,
                    label: '选址',
                    state: false
                },
                {
                    id: 3,
                    label: '签约',
                    state: false
                },
                {
                    id: 4,
                    label: '开工',
                    state: false
                },
                {
                    id: 5,
                    label: '投产',
                    state: false
                }
            ],
        }
    },
    components: {
        Header,
        CheckTitle
    },
    onLoad(options) {
        this.id = options.id
        const params = {
            uid: uni.getStorageSync('uid'),
            id: this.id,
            type: 2
        }
        mobilfajuefind(params).then(res => {
            this.title = res.data.jo_project.substr(0, 8) + '...'
            const indexObj = this.stageData.findIndex(fl => fl.label == res.data.jo_phase)
            this.stageData.forEach(fe => {
                if (fe.id <= indexObj + 1) {
                    return fe.state = true
                } else {
                    return fe.state = false
                }
            })
            this.detail = res.data
        })

    },
    methods: {
        navCompany() {
            console.log(111)
            uni.navigateTo({
                url: `../companyDetail/companyDetail?id=${this.detail.firm_id}`
            })
        },
        // 切换收藏状态
        onStar() {
            console.log(111)
            const params = {
                uid: uni.getStorageSync('uid'),
                type: 2,
                cid: this.detail.id
            }
            if (this.detail.iscollect == 1) {
                itemDel(params).then(res => {
                    if (res.status === 1) {
                        uni.showToast({
                            title: '取消收藏',
                            icon: 'none'
                        })
                        this.detail.iscollect = 0
                    }
                })
            } else {
                itemColAdd(params).then(res => {
                    if (res.status === 1) {
                        uni.showToast({
                            title: '收藏成功',
                            icon: 'none'
                        })
                        this.detail.iscollect = 1
                    }
                })
            }
        },
        checkChange(e) {
            setTimeout(() => {
                uni.pageScrollTo({
                    scrollTop: 600,
                    duration: 200,
                    success: res => {
                        console.log(res, 'res--')
                    },
                    fail: err => {
                        console.log(err, 'err--')
                    }
                })
            }, 50)
            this.checkIndex = e
        }
    }
})
</script>

<style scoped lang="scss">
.title_text {
    font-size: 32rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: #494949;
    line-height: 45rpx;
    display: flex;
    align-items: center;
    .title_text_time {
        height: 28rpx;
        font-size: 20rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #9B9B9B;
        line-height: 28rpx;
        margin-left: 20rpx;
    }
}
.title_text::before {
    content: '';
    width: 0;
    height: 32rpx;
    box-sizing: border-box;
    border-left: 6rpx solid #5162FD;
    border-right: 6rpx solid #5162FD;
    margin-right: 8rpx;
}
.content {
    flex-direction: column;
    width: 100%;
    background: #f8f8f8;
    display: flex;
    box-sizing: border-box;
    align-items: center;
    overflow-y: auto;
    .block {
        width: 100%;
        margin-top: 12rpx;
        background: white;
        padding: 30rpx;
        box-sizing: border-box;
        .contacts_block {
            margin-top: 30rpx;
            width: 100%;
            height: autp;
            font-size: 24rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            color: #656667;
            line-height: 40rpx;
        }
        .company_head {
            width: 100%;
            display: flex;
            align-items: center;
            height: 100rpx;
            .head_img_yes {
                border: 1rpx solid #e4e4e4;
                border-radius: 10rpx;
                width: 98rpx;
                height: 98rpx;
                box-sizing: border-box;
            }
            .head_img {
                width: 98rpx;
                height: 98rpx;
                border-radius: 12rpx;
                background-image: linear-gradient(0, #5162FD, #8E4EF7);
                color: #FFFFFF;
                text-align: center;
                padding: 10rpx;
                box-sizing: border-box;
                font-size: 28rpx;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                line-height: 40rpx;
            }
            .head_name {
                font-size: 36rpx;
                font-family: PingFangSC, PingFang SC;
                font-weight: 500;
                color: #494949;
                line-height: 50rpx;
                padding-left: 20rpx;
                box-sizing: border-box;
                flex: 1;
            }
        }
        .block_title {
            width: 100%;
            height: 45rpx;

        }
        .block_content {
            width: 100%;
            font-size: 24rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            color: #656667;
            line-height: 40rpx;
            margin-top: 30rpx;
            padding-left: 10rpx;
            margin-bottom: 10rpx;
            box-sizing: border-box;
            .ol_row {
                width: 100%;
                font-size: 28rpx;
                line-height: 50rpx;
                padding: 0 10rpx;
            }
        }
        .tips_block_com {
            width: 100%;
            height: auto;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            flex-direction: row;
            .tips {
                font-size: 22rpx;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                color: #5162FD;
                line-height: 30rpx;
                padding: 6rpx 10rpx;
                border-radius: 10rpx;
                text-align: center;
                box-sizing: border-box;
                background: #e8eaff;
                margin: 10rpx 6rpx;
            }
        }
        .tips_block {
            width: 100%;
            height: auto;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            justify-content: flex-start;
            flex-direction: row;
            .tips {
                font-size: 22rpx;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                color: #5162FD;
                line-height: 30rpx;
                padding: 6rpx 10rpx;
                border-radius: 10rpx;
                text-align: center;
                box-sizing: border-box;
                background: #e8eaff;
                margin: 10rpx 6rpx;
            }
        }
        .block_main {
            width: 100%;
            height: 220rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .block_left {
                width: 70%;
                height: 100%;
                flex: 1;
                .stage_block {
                    width: 100%;
                    height: 100rpx;
                    display: flex;
                    align-items: center;
                    justify-content: start;
                    .inStage {
                        width: 100rpx;
                        height: 46rpx;
                        background: #5162FD;
                        font-size: 20rpx;
                        font-family: PingFangSC, PingFang SC;
                        font-weight: 400;
                        color: #FFFFFF;
                        line-height: 46rpx;
                        padding-left: 26rpx;
                        position:relative;
                        box-sizing: border-box;
                        clip-path: polygon(80% 0%, 100% 50%, 80% 100%, 0% 100%, 15% 50%, 0% 0%);
                    }
                    .stage {
                        width: 100rpx;
                        height: 46rpx;
                        background: #E2E2E2;
                        font-size: 20rpx;
                        font-family: PingFangSC, PingFang SC;
                        font-weight: 400;
                        color: #9B9B9B;
                        line-height: 46rpx;
                        box-sizing: border-box;
                        padding-left: 26rpx;
                        position:relative;
                        clip-path: polygon(80% 0%, 100% 50%, 80% 100%, 0% 100%, 15% 50%, 0% 0%);
                    }
                    .stageStart {
                        clip-path: polygon(80% 0%, 100% 50%, 80% 100%, 0% 100%, 0% 0%);
                    }
                }
                .left_text {
                    height: 40rpx;
                    font-size: 24rpx;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 400;
                    color: #656667;
                    line-height: 40rpx;
                    margin-bottom: 43rpx;
                }
            }
            .block_view {
                width: 220rpx;
                height: 220rpx;
            }
        }
        .budget {
            width: 100%;
            height: 150rpx;
            background: #fafafa;
            display: flex;
            align-items: center;
            justify-content: space-around;
            .budget_block {
                width: 25%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                flex-direction: column;
                padding: 10rpx;
                box-sizing: border-box;
                .budget_title {
                    width: 100%;
                    height: 40rpx;
                    text-align: center;
                    font-size: 24rpx;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 400;
                    color: #656667;
                    line-height: 40rpx;
                }
                .budget_text {
                    width: 100%;
                    text-align: center;
                    height: 48rpx;
                    font-size: 34rpx;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 400;
                    color: #5162FD;
                    line-height: 48rpx;
                }
                .budget_unit {
                    width: 100%;
                    height: 40rpx;
                    text-align: center;
                    font-size: 24rpx;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 400;
                    color: #656667;
                    line-height: 40rpx;
                }
            }
        }
        .contacts  {
            width: 100%;
            height: 138rpx;
            display: flex;
            align-items: center;
            .head {
                width: 88rpx;
                height: 88rpx;
            }
            .contacts_main {
                width: 100%;
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: center;
                border-bottom: 1rpx solid #E2E2E2;
                padding-left: 10rpx;
                box-sizing: border-box;
                flex: 1;
                .name {
                    height: 45rpx;
                    font-size: 32rpx;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 400;
                    color: #494949;
                    line-height: 45rpx;
                    margin-bottom: 10rpx;
                }
                .unit {
                    font-size: 24rpx;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 400;
                    color: #9B9B9B;
                    line-height: 33rpx;
                }
            }
            .img_black {
                display: flex;
                align-items: center;
                justify-content: center;
                border-bottom: 1rpx solid #E2E2E2;
                box-sizing: border-box;
                height: 100%;
                .im_icon {
                    width: 64rpx;
                    height: 64rpx;
                }
            }
        }

    }
}
</style>
